import React, {
    Component,
} from 'react';
import {
    StyleSheet,
    Text,
    View,
    Platform,
    Dimensions,
    TouchableOpacity,
    Image,
    Alert,
    FlatList,
    TextInput,
    Linking,
    ScrollView
} from 'react-native';

import moment from 'moment';
import HttpUtils from '../../utils/HttpUtils';
import HttpUrls from '../../utils/HttpUrls';
import AndroidModule from "../../utils/AndroidConnent";
import { ToastToUser } from "../../utils/CustomToast";
import Constant from '../../utils/Constant'
import NoData from '../../utils/NoData'
import Header from "../../components/header";
import { getImgUrl } from '../../utils/ComFunction'
import Loading from "../../utils/Loading";
import CommonAlertView from "../common/CommonAlertView";

const screenW = Dimensions.get('window').width;
let navigation

export default class CompanyEmployeeDetail extends Component {
    constructor(props) {
        super(props);
        let employee = this.props.route && this.props.route.params && this.props.route.params.employee ? JSON.parse(this.props.route.params.employee) : {}
        this.state = {
            employee: employee,
        }
    }

    componentDidMount() {

    }

    render() {
        navigation = this.props.navigation;
        return (
            <View style={styles.container}>
                <Header navigation={navigation} Title={'员工详情'} RightButton={()=>this.renderRightButton()}></Header>

                <ScrollView style={{flex:1}} showsVerticalScrollIndicator={false}>
                    <View style={styles.headBox}>
                        {
                            this.state.employee.face ?
                            <Image style={styles.headImg} source={{ uri: getImgUrl(this.state.employee.face) }}/>
                            :
                            <Image style={styles.headImg} source={require('source/image/userIcon.png')}/>

                        }
                        <Text style={{marginLeft:24, fontSize:15, color:'#333333'}}>{this.state.employee.fullname}</Text>
                    </View>
                    <View style={styles.sepLine}/>
                    <View style={styles.infoBox}>
                        <View style={styles.baseBox}>
                            <Text style={{color: '#333', fontSize: 16, fontWeight: '500'}}>基本信息</Text>
                        </View>
                        <View style={styles.itemBox}>
                            <Text style={styles.itemTitleText}>联系电话</Text>
                            <Text style={styles.itemTitleText}>{this.state.employee.userPhone}</Text>
                        </View>
                        <View style={styles.itemBox}>
                            <Text style={styles.itemTitleText}>职务</Text>
                            <Text style={styles.itemTitleText}>{this.state.employee.job}</Text>
                        </View>
                        <View style={styles.itemBox}>
                            <Text style={styles.itemTitleText}>加入日期</Text>
                            <Text style={styles.itemTitleText}>{this.state.employee.createTime}</Text>
                        </View>
                        <View style={styles.itemBox}>
                            <Text style={styles.itemTitleText}>状态</Text>
                            <Text style={styles.itemTitleText}>{this.state.employee.staffStatus == '1' ? '正常':'已离职'}</Text>
                        </View>
                        <View style={styles.remarkBox}>
                            <Text style={styles.itemTitleText}>备注</Text>
                            {
                                this.state.employee.remark ?
                                <View style={styles.remarkBg}>
                                    <Text style={styles.remarkText}>{this.state.employee.remark}</Text>
                                </View>
                                :
                                null
                            }
                        </View>
                    </View>
                </ScrollView>

                <Loading onRef={(ref) => (this.Loading = ref)} />
            </View>
        )
    }

    renderRightButton() {
        return (
            <TouchableOpacity
                activeOpacity={0.8}
                onPress={this.edit}>
                <View style={styles.rightBox}>
                    <Text style={styles.rightText}>编辑</Text>
                </View>
            </TouchableOpacity>
        )
    }

    edit = () => {
        this.props.navigation.navigate('CompanyEmployeeEdit',{
            employee: JSON.stringify(this.state.employee),
            completion: (employee)=>{
                this.setState({
                    employee: employee
                }, function() {
                    if (this.props.route.params && this.props.route.params.completion) {
                        this.props.route.params.completion(this.state.employee)
                    }
                })
            }
        })
    }

}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F9F9F9',
    },
    rightBox: {
        height: '100%',
        width: 70,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'flex-end',
    },
    rightText: {
        fontSize: 16,
        color: '#333333',
        fontWeight: 'bold',
    },
    headBox: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'flex-start',
        height: 82,
        backgroundColor: '#fff'
    },
    headImg: {
        width: 56,
        height: 56,
        borderRadius: 28,
        marginLeft: 12,
    },
    sepLine: {
        width: '100%',
        height: 10
    },
    infoBox: {
        flexDirection: 'column',
        justifyContent: 'flex-start',
        alignItems: 'flex-start',
        backgroundColor: '#fff',
        paddingLeft: 12,
        paddingTop: 60,
    },
    baseBox: {
        position: 'absolute',
        top: 12,
        left: 0,
        width: 100,
        height: 36,
        marginBottom: 12,
        justifyContent: 'center',
        alignItems: 'center',
        borderBottomRightRadius: 18,
        borderTopRightRadius: 18,
        backgroundColor: '#ffde00'
    },
    itemBox: {
        width: '100%',
        paddingRight: 12,
        height: 45,
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        backgroundColor: '#fff',
        borderBottomColor: '#e4e4e4',
        borderBottomWidth: 0.3,
    },
    itemTitleText: {
        fontSize: 14,
        color: '#333',
    },
    remarkBox: {
        flexDirection: 'column',
        width: '100%',
        paddingRight: 12,
        paddingTop: 14,
        paddingBottom: 14,
        backgroundColor: '#fff',
    },
    remarkBg: {
        marginTop: 12,
        backgroundColor: '#f9f9f9',
        width: '100%',
        padding: 10,
    },
    remarkText: {
        fontSize: 14,
        color: '#999',
        lineHeight: 18
    }
    
})